<template>
  <div class="search">
    <Header :isLeft="true" title="搜索"></Header>
    <div class="search_header">
      <div class="search_wrap">
        <i class="fa fa-search"></i>
        <input type="text" v-model="key_word" placeholder="输入商家/商品信息" />
        <button @click="keyWordChange">搜索</button>
      </div>
    </div>
    <div class="shop" v-if="result && !showShop">
      <div class="empty_wrap" v-if="empty">
        <img
          src="https://fuss10.elemecdn.com/d/60/70008646170d1f654e926a2aaa3afpng.png"
          alt=""
        />
        <div class="empty_txt">
          <h4>附近没有搜索结果</h4>
          <span>换个关键词试试吧</span>
        </div>
      </div>
      <div v-else>
        <SearchIndex
          @click="$router.push('/shop')"
          :data="result.restaurants"
        ></SearchIndex>
        <SearchIndex @click="shopItemClick" :data="result.word"></SearchIndex>
      </div>
    </div>
    <div class="container" v-if="showShop">
      <FilterView :filterData="filterData" @update="update"></FilterView>
      <div class="shoplist">
        <IndexShop
          v-for="(item, index) in restaurants"
          :key="index"
          :restaurant="item"
        ></IndexShop>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "../components/Header";
import SearchIndex from "../components/SearchIndex";
import FilterView from "../components/FilterView";
import IndexShop from "../components/IndexShop";
export default {
  name: "Search",
  data() {
    return {
      key_word: "",
      result: null,
      empty: false,
      showShop: false,
      filterData: {
        navTab: [
          { name: "综合排序", icon: "caret-down" },
          { name: "距离最近", condition: "distance" },
          { name: "品质联盟", condition: "is_premium" },
          { name: "筛选", icon: "filter" },
        ],
        sortBy: [
          { name: "综合排序", code: "" },
          { name: "好评优先", code: "rating" },
          { name: "销量最高", code: "recent_order_num" },
          { name: "起送价最低", code: "" },
          { name: "配送最快", code: "" },
          { name: "配送费最低", code: "" },
          { name: "人均从低到高", code: "" },
          { name: "人均从高到低", code: "" },
          { name: "通用排序", code: "" },
        ],
        screenBy: [
          {
            title: "商家服务（可多选）",
            data: [
              {
                name: "蜂鸟专送",
                icon:
                  "https://cube.elemecdn.com/b/9b/45d2f6ff0dbeef3a78ef0e4e90abapng.png?x-oss-process=image/format,webp/resize,w_24,h_24,m_fixed",
                select: false,
                code: "delivery_mode[]",
              },
              {
                name: "到店自取",
                icon:
                  "https://cube.elemecdn.com/1/90/af4de7fc6dc858874b1d5e8a5481cpng.png?x-oss-process=image/format,webp/resize,w_24,h_24,m_fixed",
                select: false,
              },
              {
                name: "品牌商家",
                icon:
                  "https://cube.elemecdn.com/6/7c/417ba499b9ef8240b8014a453bf30png.png?x-oss-process=image/format,webp/resize,w_24,h_24,m_fixed",
                select: false,
              },
              {
                name: "新店",
                icon:
                  "https://cube.elemecdn.com/c/93/ded991df780906f7471128a226104png.png?x-oss-process=image/format,webp/resize,w_24,h_24,m_fixed",
                select: false,
              },
              {
                name: "接收预订",
                icon:
                  "https://cube.elemecdn.com/8/7b/4cc4e93572cde4aff248d539792c9png.png?x-oss-process=image/format,webp/resize,w_24,h_24,m_fixed",
                select: false,
              },
              {
                name: "食无忧",
                icon:
                  "https://cube.elemecdn.com/2/cd/444d002a94325c5dff004fb3b9505png.png?x-oss-process=image/format,webp/resize,w_24,h_24,m_fixed",
                select: false,
              },
              {
                name: "开发票",
                icon:
                  "https://cube.elemecdn.com/3/d4/5668ffc03151826f95b75249bea31png.png?x-oss-process=image/format,webp/resize,w_24,h_24,m_fixed",
                select: false,
              },
            ],
            id: "MPI",
          },
          {
            title: "优惠活动",
            data: [
              { name: "首次光顾立减", select: false },
              { name: "满减优惠", select: false },
              { name: "下单返红包", select: false },
              { name: "进店领红包", select: false },
              { name: "配送费优惠", select: false },
              { name: "赠品优惠", select: false },
              { name: "特价商品", select: false },
              { name: "品质联盟红包", select: false },
            ],
            id: "offer",
          },
          {
            title: "人均消费",
            data: [
              { name: "¥20以下", select: false },
              { name: "¥20 - ¥40", select: false },
              { name: "¥40 - ¥60", select: false },
              { name: "¥60 - ¥80", select: false },
              { name: "¥80 - ¥100", select: false },
              { name: "¥100以上", select: false },
            ],
            id: "per",
          },
        ],
      },
      restaurants: [],
    };
  },
  components: { Header, SearchIndex, FilterView, IndexShop },
  watch: {
    key_word() {
      this.showShop = false;
      this.isKeyWord();
    },
  },
  methods: {
    keyWordChange() {
      if (this.key_word == "茶") {
        this.result = {
          restaurants: [
            {
              name: "世界茶饮",
              image:
                "https://elm-api.caibowen.net/116d72b960f4acad6f8affb94b2c4png.png",
              rating: 4.5,
            },
          ],
          word: ["红茶", "绿茶"],
        };
        this.empty = false;
      } else if (this.key_word == "鸡") {
        this.result = {
          restaurants: [
            {
              name: "豪大大鸡排",
              image:
                "https://elm-api.caibowen.net/0a52cbb6d188224109c015a26fed8png.png",
              rating: 4.7,
            },
          ],
          word: ["鸡腿", "鸡翅"],
        };
        this.empty = false;
      } else if (this.key_word == "") {
        this.result = "假的";
        this.empty = false;
      } else {
        this.result = "假的";
        this.empty = true;
      }
    },
    isKeyWord() {
      if (this.key_word == "") {
        this.result = null;
      }
    },
    shopItemClick() {
      this.showShop = true;
      this.$axios("/eleapi").then((res) => {
        this.restaurants = res.data.data;
      });
    },
    update(condition) {
      this.filterData = condition;
      this.shopItemClick();
    },
  },
};
</script>
<style scoped>
.search {
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
}
.search_header {
  margin-top: 45px;
  background: #fff;
  padding: 0 4.266667vw;
}
.search_header .search_wrap {
  padding: 2.933333vw 2.933333vw 2.933333vw 0;
  display: flex;
  align-items: center;
  position: relative;
}
.search_wrap .fa-search {
  width: 2.933333vw;
  height: 2.933333vw;
  color: #888;
  position: absolute;
  top: 4.6666666vw;
  left: 2.933333vw;
}
.search_wrap input {
  flex-grow: 1;
  border-radius: 0.266667vw;
  background-color: #f8f8f8;
  padding: 1.733333vw 4vw 1.733333vw 8.8vw;
  color: #666;
  outline: none;
  border: none;
}
.search_wrap button {
  outline: none;
  border: none;
  color: #333;
  font-size: 0.426667rem;
  background: #fff;
  font-weight: 700;
  margin-left: 2.933333vw;
  font-size: 14px;
}

.shop {
  width: 100%;
  height: calc(100% - 95px);
  overflow: auto;
}

.empty_wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  display: flex;
  justify-content: center;
}
.empty_wrap img {
  width: 35vw;
  height: 35vw;
}
.empty_txt h4 {
  color: #666;
  font-size: 1rem;
  margin: 12vw 0 2vw 0;
}
.empty_txt span {
  color: #999;
  font-size: 0.8rem;
}
</style>